<template>
  <el-card shadow="hover" :body-style="{ padding: '20px' }">
   <el-form :inline="true">
    <el-form-item label="一级分类" >
        <el-select v-model="Category.c1Id" @change="handler1" :disabled="scene!=0">
            <el-option :value="C1.id" :label="C1.name" v-for="(C1,index) in Category.C1List" :key="C1.id"> </el-option>
        </el-select>    
    </el-form-item>
    <el-form-item label="二级分类" >
        <el-select @change="handler2" v-model="Category.c2Id" :disabled="scene!=0">
            <el-option v-for="(c2,index) in Category.C2List" :key="c2.id" :value="c2.id" :label="c2.name"> </el-option>
        </el-select>    
    </el-form-item>
    <el-form-item label="三级分类" >
        <el-select  v-model="Category.c3Id" :disabled="scene!=0">
            <el-option v-for="(c3,index) in Category.C3List" :key="c3.id" :value="c3.id" :label="c3.name"> </el-option>
        </el-select>    
    </el-form-item>
    
   </el-form>
  </el-card>
  
</template>

<script setup lang="ts">
    import { onMounted } from 'vue';
    import UseCategory from '@/stores/category'
    defineProps(['scene'])
    let Category=UseCategory()
    onMounted(()=>{
       Category.getcategory()
    })
    const handler1=()=>{
        Category.getC2List()
    }
    const handler2=()=>{
        Category.getC3List()
    }
    
</script>

<style scoped>

</style>